import { LitElement, css, html } from "lit";
import { customElement, property, state } from "lit/decorators.js";

@customElement("nav-l3")
class NavL3 extends LitElement {
  static override styles = css`
    :host {
      display: block;
      margin: 4em;
    }
    #controls {
      display: flex;
      gap: 8px;
      padding: 8px;
      justify-content: center;
    }
    .control {
      border: solid 1px gray;
      padding: 4px;
    }
  `;

  static override properties = {
    showNav: { type: Boolean },
  };

  declare showNav: boolean;

  constructor() {
    super();
    this.showNav = false;
  }

  #showNavHandler() {
    this.showNav = !this.showNav;
  }

  protected override render() {
    return html`
      <div id="controls">
        <button class="control" @click=${this.#showNavHandler}>show nav</button>
      </div>
      <nav class="${this.showNav ? "" : "hidden"}">
        <slot showNav="${this.showNav}"></slot>
      </nav>
    `;
  }
}

export { NavL3 };
